<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子阴影</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				margin-top: 50px ;
			}
			.box1{
				background-color: pink;
				/*盒子阴影 box-shadow: 水平阴影位置,垂直阴影位置,模糊距离 颜色*/
				box-shadow: 5px 10px 15px #888;
			}
			.box2{
				background-color: deeppink;
				/*盒子阴影 box-shadow: 水平阴影位置,垂直阴影位置,模糊距离 阴影大小  颜色 内阴影*/
				box-shadow: -5px -5px 20px 5px #888 inset;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>
